<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../resources/css/newUserStyle.css" rel="stylesheet"
	type="text/css">

<title>New User</title>
<script language="JavaScript" type="text/javascript">
	function counter(campo, cuentacampo, limite) {
		if (campo.value.length > limite)
			campo.value = campo.value.substring(0, limite);
		else
			cuentacampo.value = limite - campo.value.length;
	}
</script>
</head>
<body>
	<div>
		<img id="background" src="/webapp/resources/images/background.jpg"
			alt="" title="" />
	</div>
	<div id="fixed">
		<h2>Complete information to register</h2>
		</hr>
		<h6>* Obligatory information</h6>
		<h5>$!{errorMsg}</h5>
		<div>
			<form action="create.do" method="POST">
				<table>
					<tr>
						<td>Name:</td>
						<td><input type="text" name="name" required />*</td>
					</tr>
					<tr>
						<td>Company:</td>
						<td><input type="text" name="company" /></td>
					</tr>
					<tr>
						<td>Job Title:</td>
						<td><input type="text" name="jobTitle" /></td>
					</tr>
					<tr>
						<td>E-mail:</td>
						<td><input type="email" name="email" required />*</td>
					</tr>
					<tr>
						<td>Password:</td>
						<td><input type="password" name="password" required />*</td>
					</tr>					
					<tr>
						<td>Experience:</td>
						<td><textarea name="experience" cols="60" rows="8"
								maxlength="500" wrap="physical"
								onfocus="counter(this.form.experience,this.form.remLen,500);"
								onKeyDown="counter(this.form.experience,this.form.remLen,500);"
								onKeyUp="counter(this.form.experience,this.form.remLen,500);">$!{user.experience}</textarea>
						</td>
					</tr>
					<tr>
						<td>Characters Left:</td>
						<td><input type="text" name="remLen" size="3" maxlength="3"
							value="500" readonly /></td>
					</tr>
					<tr>
						<td>Languages:</td>
						<td>
							<ul id="languages">
								#foreach($language in $availableLanguages)
								<table>
									<tr>
										<td>
											<li><input type="checkbox" name="languages" value="${language}" /> ${language}					</li>
										</td>				
									</tr>
								</table>
								#end
							</ul>
						</td>
					</tr>
					<tr>
						<td>Access:</td>
						<td><select name="accessType">
								<option value="ROLE_ADMIN">ADMIN</option>
								<option value="ROLE_USER">USER</option>
						</select></td>
					</tr>
				</table>
				<br>
				<input type="submit" value="Done" />
			</form>
		</div>
		<nav>
			<ul id="navi">
				<li><a href="dashboard.do">Back to Dashboard</a></li>
				<li><a href="editMyProfile.do">Update My profile</a></li>
				<li><a href="/webapp/j_spring_security_logout">Log out</a></li>
			</ul>

		</nav>
		<br> <br>
		<foooter> &copy; 2003 - 2012 Globant </footer>
	</div>
</body>
</html>